<template>
  <div class="review-modern-bg">
    <div class="review-modern-title-card">
      <div class="review-modern-title-content">
        <span class="review-modern-title-icon-gradient">
          <el-icon><i-ep-Check /></el-icon>
        </span>
        <span class="review-modern-title-text">人工审核</span>
      </div>
      <div class="review-modern-title-sub">AI内容安全 · 人工复核</div>
      <div class="review-modern-title-gradient-line"></div>
    </div>
    <el-card class="review-modern-card" shadow="hover">
      <el-table :data="pagedList" class="review-modern-table" stripe border>
        <el-table-column prop="id" label="内容ID" width="300" />
        <el-table-column prop="date" label="生成时间" width="180" />
        <el-table-column prop="reviewTime" label="审核时间" width="200" />
        <el-table-column prop="reviewer" label="审核员" width="120" />
        <el-table-column prop="status" label="审核状态" width="140">
          <template #default="scope">
            <span :class="['review-status-tag',
              scope.row.status === '通过' ? 'review-status-success' :
              scope.row.status === '驳回' ? 'review-status-danger' :
              'review-status-warning']">
              <span class="review-status-text">{{ scope.row.status }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="内容" >
          <template #default="scope">
            <el-tooltip effect="dark" :content="scope.row.content" placement="top">
              <span class="review-modern-ellipsis">{{ scope.row.content }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button size="small" type="primary" @click="openDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="review-modern-pagination-wrapper">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="reviewList.length"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>
    <el-drawer v-model="drawerVisible" title="审核详情" size="400px">
      <template #default>
        <div v-if="currentReview">
          <div style="margin-bottom: 12px;">
            <strong>类型：</strong>
            <el-tag :type="currentReview.type === '文本' ? 'info' : 'success'">{{ currentReview.type }}</el-tag>
          </div>
          <div style="margin-bottom: 12px;">
            <strong>内容：</strong>
            <div v-if="currentReview.type === '文本'" style="white-space: pre-wrap;">{{ currentReview.content }}</div>
            <el-image v-else :src="currentReview.content" style="max-width: 100%; max-height: 200px" fit="contain" />
          </div>
          <div style="margin-bottom: 12px;">
            <strong>判定依据：</strong>
            <el-tag v-for="(tag, idx) in currentReview.criteria" :key="idx" type="danger" style="margin-right: 4px;">{{ tag }}</el-tag>
          </div>
          <div style="margin-bottom: 12px;">
            <strong>审核员ID：</strong> {{ currentReview.reviewer }}
          </div>
          <div style="margin-bottom: 12px;">
            <strong>审核时间：</strong> {{ currentReview.reviewTime }}
          </div>
          <div style="margin-bottom: 12px;">
            <strong>审核状态：</strong>
            <el-tag :type="currentReview.status === '待审核' ? 'warning' : (currentReview.status === '通过' ? 'success' : 'danger')">
              {{ currentReview.status }}
            </el-tag>
          </div>
          <div v-if="currentReview.status === '待审核'" style="margin-top: 24px;">
            <el-button type="success" @click="handleReview('通过')">通过</el-button>
            <el-button type="danger" @click="handleReview('驳回')">驳回</el-button>
          </div>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { Check as IepCheck, CircleCheckFilled, CircleCloseFilled, Clock } from '@element-plus/icons-vue';

interface ReviewItem {
  id: string;
  date: string;
  type: '文本' | '图片';
  content: string;
  status: '待审核' | '通过' | '驳回';
  reviewer: string;
  reviewTime: string;
  criteria: string[];
}

const reviewList = ref<ReviewItem[]>([
  {
    id: '0a5de4c9-b0d7-4961-9ba9-73be9d6c9fad',
    date:'2025/6/23 10:47:29',
    type: '文本',
    content: '无',
    status: '通过',
    reviewer: '廖卫',
    reviewTime: '2025/6/24 10:52:31',
    criteria: ['命中关键词：测试', '风险标签：敏感词'],
  },
  {
    id: '8s2adhs8-8s6d-27sh-2ad8-93ca9a6acd29',
    date:'2025/6/21 11:35:35',
    type: '图片',
    content: '信息不对称',
    status: '驳回',
    reviewer: '廖卫',
    reviewTime: '2025/6/21 16:15:37',
    criteria: ['风险标签：涉黄'],
  },
  {
    id: 'd00664dd-65f2-5aed-9cd8-63ca9a6acd50',
    date:'2025/6/22 15:28:38',
    type: '文本',
    content: '无',
    status: '通过',
    reviewer: '廖卫',
    reviewTime: '2025/6/23 9:26:18',
    criteria: [],
  },
]);

const pageSize = 10;
const currentPage = ref(1);
const pagedList = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  return reviewList.value.slice(start, start + pageSize);
});
function handlePageChange(page: number) {
  currentPage.value = page;
}

const drawerVisible = ref(false);
const currentReview = ref<ReviewItem | null>(null);

function openDetail(row: ReviewItem) {
  currentReview.value = row;
  drawerVisible.value = true;
}

function handleReview(result: '通过' | '驳回') {
  if (!currentReview.value) return;
  currentReview.value.status = result;
  currentReview.value.reviewTime = new Date().toLocaleString();
  drawerVisible.value = false;
}
</script>

<style lang="scss" scoped>
.review-modern-bg {
  background: var(--ai-bg-primary);
  min-height: 100vh;
  color: var(--ai-text-primary);
}

.review-modern-title-card {
  background: var(--ai-bg-card);
  backdrop-filter: var(--ai-blur-md);
  border: 1px solid var(--ai-border);
  box-shadow: var(--ai-shadow-lg);
}

.review-modern-title-content {
  display: flex;
  align-items: center;
  padding: 0 32px;
  height: 80px;
}
.review-modern-title-icon-gradient {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ai-gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  box-shadow: var(--ai-shadow-md);
  transition: var(--ai-transition);
}

.review-modern-title-icon-gradient:hover {
  transform: scale(1.1);
  box-shadow: var(--ai-shadow-lg);
}
.review-modern-title-icon .el-icon {
  font-size: 32px;
  color: #fff;
}
.review-modern-title-text {
  font-size: 32px;
  font-weight: 800;
  background: var(--ai-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 2px;
}
.review-modern-title-sub {
  font-size: 16px;
  color: #a0aec0;
  padding-left: 100px;
  padding-bottom: 8px;
}
.review-modern-title-gradient-line {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--ai-gradient-primary);
}
.review-modern-card {
  border: 1px solid var(--ai-border);
  box-shadow: var(--ai-shadow-lg);
  background: var(--ai-bg-card);
  backdrop-filter: var(--ai-blur-md);
}
.review-modern-table {
  margin: 32px auto 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  font-size: 16px;
}
.el-table__header th {
  background: var(--ai-bg-overlay) !important;
  color: var(--ai-text-secondary);
  font-weight: 700;
  font-size: 16px;
}
.el-table__row:hover {
  background: var(--ai-bg-overlay) !important;
}
.review-status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  border-radius: 16px;
  padding: 0 16px;
  height: 36px;
  margin: 0 2px;
}
.review-status-success {
  background: var(--ai-bg-overlay);
  color: var(--ai-primary);
  border: 1px solid var(--ai-border-accent);
}
.review-status-danger {
  background: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
  border: 1px solid rgba(255, 77, 79, 0.3);
}
.review-status-warning {
  background: rgba(250, 140, 22, 0.1);
  color: #faad14;
  border: 1px solid rgba(250, 140, 22, 0.3);
}
.review-status-icon {
  font-size: 22px;
  margin-right: 8px;
}
.review-status-text {
  font-size: 16px;
  font-weight: 700;
}
.review-modern-ellipsis {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.review-modern-pagination-wrapper {
  display: flex;
  justify-content: center;
  margin: 28px 0 0 0;
}
.el-pagination.is-background .el-pager li {
  border-radius: 8px;
  color: var(--ai-text-secondary);
}
.el-pagination.is-background .el-pager li.is-active {
  background: var(--ai-gradient-primary);
  color: #fff;
}
.el-pagination.is-background .el-pagination__jump {
  color: var(--ai-text-secondary);
}
</style> 